<template>
  <div>
    <div class="game_point">
      <div class="title">
        <span class="icon"></span>
        <span>游戏点位</span>
      </div>
      <ul v-show="gameinfo">
        <li class="list_item">
          <p>
            大陆({{ clientType }})：{{ gameinfo.discount }}折 -
            <span style="color: #cd3231">{{ gameinfo.rate_wx }}%</span>提成
          </p>
        </li>
        <li class="list_item">
          <p>
            海外({{ clientType }})：{{ gameinfo.discount }}折 -
            <span style="color: #cd3231">{{ gameinfo.rate }}%</span>提成
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    clientType() {
      if (this.gameinfo !== '') {
        if (this.gameinfo.client_type === "1") {
          return "Android";
        } else if (this.gameinfo.client_type === "2") {
          return "IOS";
        } else if (this.gameinfo.client_type === "3") {
          return "双端";
        } else if (this.gameinfo.client_type === "4") {
          return "H5端";
        } else if (this.gameinfo.client_type === "5") {
          return "单机";
        }
      }
    },
  },
};
</script>

<style scoped>
.game_point {
  width: 750px;
  box-sizing: border-box;
  height: auto;
  padding: 44px 40px 0;
  border-bottom: 1px solid #e3e3e3;
}

.game_point .title {
  padding-bottom: 20px;
  font-size: 26px;
  color: #333;
  font-weight: bold;
  line-height: 36px;
  display: flex;
  align-items: center;
}

.game_point .title .icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url("../../../assets/img/datail/ic_game_detail_point.png")
    no-repeat;
  background-size: 100%;
  margin-right: 15px;
}

.list_item {
  line-height: 54px;
  font-size: 24px;
  color: #333;
}
</style>